<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>修改新闻</title>


<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
	<script src="/js/layer.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<style type="text/css">
#container {
	margin-top: -20px;
	margin-left: 10px;
}
</style>

</head>
<body>
	<div id="container">
		<div class="page-header text-center">
				<h2 style="text-align: left">修改新闻</h2>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-4 col-md-offset-4">
				<form class="form-horizontal" action="/updateNews" method="post" id="updateForm" >
					<table class="table table-bordered table-condensed ">
						<thead></thead>
						<tbody>
							<tr class="text-center">
								<td>ID</td>
								<td>
									<div class="col-sm-10">
										<input type="text" class="form-control" th:value="${news.id}" disabled>
										<input hidden name="id" th:value="${news.id}">
									</div>
								</td>
							</tr>
							<tr class="text-center">
								<td>封面</td>
								<td>
									<div class="col-sm-10">
										<img width="33" height="30" th:src="'/img/'+${news.cover}"/>
										<input type="file" id="newsCover" name="newsCover" class="form-control">
									</div>
								</td>
							</tr>
							<tr class="text-center">
								<td>描述</td>
								<td>
									<div class="col-sm-10">
										<textarea  class="form-control" id="description" name="description" th:text="${news.description}"></textarea>
									</div>
								</td>
							</tr>
							<tr class="text-center">
								<td>日期</td>
								<td>
									<div class="col-sm-10">
										<input type="text" id="newsDate" name="newsDate" class="form-control"  th:value="${#dates.format(news.newsDate,'yyyy-MM-dd')}">
									</div>
								</td>
							</tr>
							<tr class="text-center">
								<td>链接</td>
								<td>
									<div class="col-sm-10">
										<input type="text" id="newsHref" name="newsHref" class="form-control" th:value="${news.newsHref}">
									</div>
								</td>
							</tr>
							<tr class="text-center">
								<td>标题</td>
								<td>
									<div class="col-sm-10">
										<input type="text" id="newsTitle" name="newsTitle" class="form-control" th:value="${news.newsTitle}" >
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="row">
						<div class="col-xs-6 col-sm-7">
							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<input type="button" class="btn btn-primary" value="确认修改" onclick="updateNews()" />
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
<script type="text/javascript">

	let oriDescription;
	let oriNewsDate;
	let oriNewsHref;
	let oriNewsTitle;

	function updateNews(){

		//判断是否有修改，需要通过th标签注入一些值，或者在onready时取出表单中的值(=>在onReady是获取数据)

		if (oriDescription == $("#description").val()
			&& oriNewsTitle == $("#newsTitle").val()
			&& oriNewsHref == $("#newsHref").val()
			&& oriNewsDate==$("#newsDate").val()
			&& $("#newsCover").val()==""){
			layer.msg("未修改任何值");
			return;
		}
		let data = new FormData($("#updateForm")[0]);
		//	切换为ajax提交方式
		Vue.http.post('/updateNews',data,{emulateJSON:true})
				.then((res)=>{
					parent.layer.msg(res.data.message);
					parent.getNews(1);
					closeLayer();
				},(error)=>{
					console.log(error);
				});
	}

	function closeLayer() {
		parent.layer.close(parent.layer.getFrameIndex(window.name));
	}
	$(document).ready(function () {
		oriDescription=$("#description").val();
		oriNewsDate=$("#newsDate").val();
		oriNewsHref=$("#newsHref").val();
		oriNewsTitle=$("#newsTitle").val();
	});
</script>
</body>
</html>
